<script>
export default {
  name: "EzMenu",
  props: {
    menu: {},
    sideBarExpand: {
      type: Boolean,
      default: true
    },
    index: {
      type: Number,
      default: 0
    }
  },
  methods: {
    handleOpen(v){
      this.$emit('open',v,this.index)
    },
    onChildOpen(v,index){
      for (let child in this.menu.children) {
        if (child*1 === index){
          this.$set( this.menu.children[child],"_open",v)
        }else {
          this.$set( this.menu.children[child],"_open",false)
        }
      }
    },
  }
}
</script>

<template >
    <mu-list-item button active-class="bca01 bdrso bdc05 bdw5"
                  @toggle-nested="handleOpen"
                  :nested="!!menu.children"
                  :to="menu.url"
                  :open="!!menu._open" v-if="!!menu">
      <mu-list-item-action  style="min-width: 32px!important;">
        <mu-icon :value="menu.icon" v-if="menu.icon !== ''" size="20"></mu-icon>
        <mu-icon value="layers" v-else size="20"></mu-icon>
      </mu-list-item-action>
      <div class="flex1" v-show="sideBarExpand">{{ menu.name }}</div>
      <mu-icon :class="{'menu-close':!menu._open,'menu-open':menu._open}"
          value="expand_more" v-show="menu.children.length>0 && sideBarExpand">
      </mu-icon>
      <EzMenu slot="nested" @open="onChildOpen" :key="`menu_${idx}`" :index="idx" :menu="child" v-for="(child,idx) in menu.children" ></EzMenu>
    </mu-list-item>
</template>

<style scoped>
.menu-close {
  transform: rotate(-90deg);
  transition: transform .2s;
}

.menu-open {
  transform: rotate(0deg);
  transition: transform .2s;
}
</style>